<script setup lang="ts">

import RewardBox from "~/components/advertisement/rewardBox.vue";
import AuthorInfo from "~/components/advertisement/authorInfo.vue";
import MasterBox from "~/components/advertisement/MasterBox.vue";

const moneyDialogShow = ref(false)
const callDialogShow = ref(false)
const aboutDialogShow = ref(false)
</script>

<template>
  <div class="footer-box">
    <ul class="footer-column-t">
      <li>软件定制</li>
      <li @click="aboutDialogShow=true">关于作者</li>
      <li @click="aboutDialogShow=true">联系作者</li>
      <li @click="moneyDialogShow=true">打赏作者</li>
    </ul>
    <div class="master-box">
      <div class="link-item" style="display: flex; flex-direction:column;align-items: center;justify-content: center;">
        <el-link href="tencent://message/?uin=1092861702&Site=&Menu=yes" title="点击添加服主好友" target="_blank">
          服主QQ:1092861702
        </el-link>
      </div>
      <div class="link-item">
        <el-link href="https://qm.qq.com/q/vLCsL0LbCS" title="点击链接加入玩家交流群" target="_blank">
          点击加入玩家交流群【524615649】
        </el-link>
      </div>
    </div>
    <div class="other-box">
      <el-dialog v-model="moneyDialogShow" width="400px">
        <reward-box/>
      </el-dialog>
      <el-dialog v-model="aboutDialogShow" width="400px">
        <author-info/>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped>
.footer-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: .5rem;

  .footer-column-t {
    display: flex;
    user-select: none;

    li {
      color: #999aaa;
      font-size: 14px;
      margin: 0 .5rem;
      cursor: pointer;
    }

    li:hover {
      color: #0fd7ff;
    }
  }
}
</style>